<template>
	<view class="content">
		<cu-custom style="background-color: #fff;opacity: 1;" bgColor="bg-white" :isBack="true">
			<block slot="content">十大基础设施项目</block>
			<view slot="right"  @tap="goShaixuan"><image src="../../static/icon/shaixuan.png" style="width: 15px;height: 17px;"></image> </view>
		</cu-custom>
		
		<view class="projectHead">
			<view class="searchView">
				<view class="time uni-flex">
					<!-- <view class="timeText">2021</view> -->
					<view class="search_nf">
						<picker :range="years" value="5" @change="yearChange">
							{{ years[yearsIndex] }} 年 <span class='r'></span>
						</picker>
					</view>
					<image class="shaixuanFont" src="../../static/icon/triangleFont.png"></image> 
				</view>
				<input class="searchProj" type="text" placeholder="请输入项目名称" v-model="inputText" @confirm="confirm"/>
				<view class="searchFont" @click="goSearch"><image src="../../static/icon/search.png"></image> </view>
			</view>
		</view>
			<view class="uni-list item-wrap" style="display: block;" >
				<!-- 如果为空，显示图片 -->
				<view class="noData" v-if="isShowNodata==true">
					<view class="imgBox"> 
						<image class="noDataImg" style="width: 284px;height: 284px;" src="../../static/nodata.png"></image>
					</view>
					<view class="textView">
						<view class="smallText" style="text-align: center;">没有数据哦~</view>
					</view>
				</view>
				<view class="uni-list-cell" style="display: block;" v-else v-for="(item,index) in news" :key="index"  
				:data-newsid="item.newsid">
				<!-- 父级 -->
				<view class="uni-media-list" v-if="item.linkId==''">
					<view class="uni-media-list-body">
						<view class="listContent" hover-class="uni-list-cell-hover" @tap="openinfo" :data-newsid="item.newsid">
							<view class="uni-media-list-text-top titleText">{{item.num}}. {{item.title}}</view>
							<view class="uni-flex uni-ellipsis">
							  <view class="infoText2">
								计划投资：{{item.planInvestment}}亿元
							  </view>
							  <view class="infoText2">完成进度:{{item.rate}}%</view>
							  <!-- 建设阶段：{{item.source}} 
							  年度计划投资：{{item.planInvestment}} 
							  本年度建设目标	{{item.buildTarget}} -->
							</view>
						</view>
						<view class="imgView uni-flex" v-if="item.photos.length!=0">
							<view class="imgBox" v-for="(imgItem,index) in item.photos" :key="index"> 
								<image :src="imgItem.src" @click="previewImage(index)"></image>
							</view>
						</view>
						<view class="btomFont">
							<view class="btomFont_one" @tap="goJk" :data-newsid="item.newsid" :data-isMonitor="item.isMonitor">
								<image class="jiankongFont"  v-if="item.isMonitor==1" src="../../static/icon/icon-2.png"></image>
								<image class="jiankongFont" v-else src="../../static/icon/icon.png"></image>
								<view :class="{btomActive:item.isMonitor==1}">监控</view>
							</view>
							<view class="btomFont_one" :class="{'btomActive':rSelect.indexOf(index)!=-1}" @click="focusOn(item,index)" :key="index" :data-newsid="item.newsid" :data-isCare="item.isCare">
								<view class="jiankongFont jiankImg" ></view>
								<!-- <image class="jiankongFont" :class="{btomActive:item.isCare==1}" v-else src="../../static/icon/icon-1.png"></image> -->
								<view>关注</view>
							</view>
							<!-- <view :class="{'ofnt': }" @tap="focusOn(index)">关注</view> -->
							<view class="btomFont_one"  :class="[item.bw!=''&&item.bw!=null ?'btomActive':'']" @click="viewMap" :data-projectId="item.projectId" :data-bw="item.bw" :data-dj="item.dj">
								<image class="jiankongFont" v-if="item.bw!=''&&item.bw!=null" src="../../static/icon/icon-5.png"></image>
								<image class="jiankongFont" v-else src="../../static/icon/icon-4.png"></image>
								<view>地图</view>
							</view>
						</view>
					</view>
				</view>
			<!-- 子级 -->
			<view class="uni-media-list" v-else>
				<view class="uni-media-list-body">
					<view class="listContent" hover-class="uni-list-cell-hover" @tap="openinfo" :data-newsid="item.newsid">
						<view class="uni-media-list-text-top titleText">({{item.nums}}). {{item.title}}</view>
						<view class="uni-flex uni-ellipsis">
						  <view class="infoText2">
							计划投资：{{item.planInvestment}}亿元
						  </view>
						  <view class="infoText2">完成进度:{{item.rate}}%</view>
						</view>
					</view>
					<view class="imgView uni-flex" v-if="item.photos.length!=0">
						<view class="imgBox" v-for="(imgItem,index) in item.photos" :key="index"> 
							<image :src="imgItem.src" @click="previewImage(index)"></image>
						</view>
					</view>
					<view class="btomFont">
						<view class="btomFont_one" @tap="goJk" :data-newsid="item.newsid" :data-isMonitor="item.isMonitor">
							<image class="jiankongFont"  v-if="item.isMonitor==1" src="../../static/icon/icon-2.png"></image>
							<image class="jiankongFont" v-else src="../../static/icon/icon.png"></image>
							<view >监控</view>
						</view>
						<!-- <view class="btomFont_one" :class="{btomActive:item.isCare==1||isCare==1}" @click="focusOn" :key="index" :data-newsid="item.newsid" :data-isCare="item.isCare"> -->
						<view class="btomFont_one" :class="{'btomActive':rSelect.indexOf(index)!=-1}" @click="focusOn(item,index)" :key="index" :data-newsid="item.newsid" :data-isCare="item.isCare">
							<view class="jiankongFont jiankImg"></view>
							<!-- <image class="jiankongFont" :class="{btomActive:item.isCare==1}" v-else src="../../static/icon/icon-1.png"></image> -->
							<view>关注</view>
						</view>
						<view class="btomFont_one"  :class="[item.bw!=''&&item.bw!=null ?'btomActive':'']" @click="viewMap" :data-projectId="item.projectId" :data-bw="item.bw" :data-dj="item.dj">
							<image class="jiankongFont" v-if="item.bw!=''&&item.bw!=null" src="../../static/icon/icon-5.png"></image>
							<image class="jiankongFont" v-else src="../../static/icon/icon-4.png"></image>
							<view>地图</view>
						</view>
					</view>
				</view>
			</view>
					
				</view>
			</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				btomActive:false,
				list: [],
				num:0,
				nums:0,
				news : [],
				years:[],
				yearsIndex:0,
				inputText:"",
				total:0,
				jiankstate:1,
				guanzhustate:0,
				mapstate:1,
				options:[],
				pageNo:1,
				pageSize:10,
				isCare:0,
				backData:[],
				buildPropertyId:"",
				industryId:"",
				proaddId:"",
				isShowNodata:false
			}
		},
		onLoad:function(options){
			this.options = options;
			this.loading(options);
			this.getYears();
			uni.stopPullDownRefresh();
			//当前年份
			this.$http.get("/sys/v1/currentYear.do",{
				
			}).then(res=>{
				//console.log(res)
				this.year= res.data;
				let yearsIndex=0;
				yearsIndex = this.years.indexOf(this.year);
				this.yearsIndex = yearsIndex;
			})
			
		},
		onShow() {
			setTimeout(() => {
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 0
					});
				}, 50);
			},
		onReachBottom(options){
			if(this.news.length<this.total){
				uni.showLoading({
					title:"加载中……"
							})
					this.pageNo+=1;
				let projectName = options.projectName;
				let conditions = options.conditions;
				console.log(conditions);
				let years = this.years;
				let yearsIndex = this.yearsIndex;
				let year = years[yearsIndex];
				this.$http.get("/project/v1/jcsslist.do",{
					params:{year:year,projectName:projectName,pageNo:this.pageNo}
					  }).then(data=> {
						  console.log(data);
							  let newsData = data.data.rows;
							   console.log(this.news);
							   var num = this.num
							   var nums = this.nums
							   console.log(num)
							  newsData = newsData.map((item) => {
								  if(item.linkId==""){
									  nums = 0
									  num = num + 1
									  this.num = num
								  } else {
									  nums = nums + 1
									  this.nums = nums
								  }
								  return {
								   newsid: item.projectId,
								   title: item.projectName,
								   isCare:item.isCare,
								   isMonitor:item.isMonitor,
								   planInvestment:item.planInvestment,
								   photos:item.photos,
								   rate:item.rate,
								   bw:item.bw,
								   dj:item.dj,
								   pxh:item.pxh,
								   nums:nums,
								   num:num,
								   linkId:item.linkId
								  };
								});	
								this.news = this.news.concat(newsData)// 合并新数据
								console.log(this.news)
								let arrDatas = []
								for(var i = 0;i < this.news.length;i++) {
										if(this.news[i].isCare == 1){
											arrDatas.push(i)
										}
								}
								this.rSelect = arrDatas
								uni.hideLoading();
								console.log(this.news.length);
								console.log(this.total);
					}).catch(e=>{
						console.log("请求错误",e)
					});
				}else{
					setTimeout(()=>{
						uni.showToast({
							title:"没有数据啦~",
							icon:"none"
						})
						uni.stopPullDownRefresh()
					},1000)
				}
		},
		
		methods:{
			upData: function(backData)
			     {
				  this.buildPropertyId = backData.jieduanId;
				  this.industryId = backData.guishuId;
				  this.proaddId = backData.lingyuId;
				  var val = 1;
				   this.loading(backData,val);
			     },
			//年份取后台
			getYears(){
				this.$http.get("/sys/v1/dict.do?code=year",{
					
				}).then(res=>{
					console.log(res);
					let years = res.data;
					for(var i=0;i<years.length;i++){
						let yearName = years[i].name;
						this.years.push(yearName);
					}
					console.log(this.years)
				})
			},
			
			loading(options,val){
				let conditions = options.conditions;
				let projectName = options.projectName;
				let years = this.years;
				let yearsIndex = this.yearsIndex;
				let year = years[yearsIndex];
				this.$http.get("/project/v1/jcsslist.do",{
					params:{
						year:year,
						projectName:projectName,
						buildPropertyId:this.buildPropertyId,
						proaddId:this.proaddId,
						industryId:this.industryId,
					pageNo:this.pageNo}
					  }).then(data=> {
						  console.log(data);
							   this.news = data.data.rows;
							   this.total = data.data.total;
							   console.log(this.news);
							   if(this.news.length==0){
							   		this.isShowNodata = true
							   }else{
							   		this.isShowNodata = false
							   }
							   var arrData = []
							   for(var i = 0;i < this.news.length;i++) {
								   if(this.news[i].isCare == 1){
									   arrData.push(i)
								   }
							   }
							   this.rSelect = arrData
							   console.log(this.rSelect)
							   var num = this.num
							   var nums = this.nums
							  this.news = this.news.map((item) => {
								  if(item.linkId==""){
									  nums = 0
									  num = num + 1
									  this.num = num
								  } else {
									  nums = nums + 1
									  this.nums = nums
								  }
								  return {
								   newsid: item.projectId,
								   title: item.projectName,
								   isCare:item.isCare,
								   isMonitor:item.isMonitor,
								   planInvestment:item.planInvestment,
								   photos:item.photos,
								   rate:item.rate,
								   bw:item.bw,
								   dj:item.dj,
								   pxh:item.pxh,
								   nums:nums,
								   num:num,
								   linkId:item.linkId
								  };
								});	
					}).catch(e=>{
						console.log("请求错误",e)
					});
			},
			// 点心心关注
			focusOn(data,index){
				//debugger;
				console.log(data)
				console.log(index)
				let projectId = data.newsid;
				let isCare = data.isCare;
				if(isCare==0){
					this.$http.get("/project/v1/addCare.do?projectId="+projectId,{
						params:''
					}).then(data=>{
						console.log(data);
						if(data.data.code==0){
							uni.showToast({
								title:"您已经关注！",
								icon:"none"
							})
							// let index;
							console.log(this.news[index])
							if(this.news[index].newsid==projectId){
								console.log(this.isCare[index])
								this.news[index].isCare=1
							}
						}
					})
				}else{
					this.$http.get("/project/v1/deleteCare.do?projectId="+projectId,{
						params:''
					}).then(data=>{
						console.log(data);
						if(data.data.code==0){
							uni.showToast({
								title:"您已取消关注！",
								icon:"none"
							})
							if(this.news[index].newsid==projectId){
								console.log(this.isCare[index])
								this.news[index].isCare=0
							}
						}
					})
				}
				if (this.rSelect.indexOf(index) == -1) {
				    console.log(index)//打印下标
			        this.rSelect.push(index);//选中添加到数组里
			    } else {
			        this.rSelect.splice(this.rSelect.indexOf(index), 1); //取消
			    }
			},
			yearChange:function(e){
				this.yearsIndex = e.detail.value;
				let options= this.options;
				var that = this;
				that.loading(options);
			},
			goSearch(){//搜索查询
				let projectName= this.inputText;
				let options={projectName:projectName};
				console.log(projectName);
				console.log(options.projectName);
				this.loading(options);
			},
			confirm(){
				this.goSearch();
				uni.hideKeyboard();
			},
			//顶部导航筛选跳转
			goShaixuan(){
				uni.navigateTo({
					url:"/pages/xmjz/shaixuan"
				})
			},
			//去监控列表
			goJk(e){
				console.log(e);
				var monitor=e.currentTarget.dataset.isMonitor;
				var newsid = e.currentTarget.dataset.newsid;
				if(monitor>0){
					uni.navigateTo({
						url:"./jklist?projectId="+newsid
					})
				}
			},
			//查看地图
			viewMap(e){
				let bw = e.currentTarget.dataset.bw;
				let dj = e.currentTarget.dataset.dj;
				let id = e.currentTarget.dataset.projectId;
				if(bw!=""&&bw!=null){
					uni.navigateTo({
						url:"/pages/map/maps?bw="+bw+"&dj="+dj+"&id="+id
					})
				}
			},
			openinfo(e){
				var projectId = e.currentTarget.dataset.newsid;
				uni.navigateTo({
				    url: '/pages/xmjz/info_jcss?projectId='+ projectId
				});
			},
			watch:{
				num(val) {
					this.nums = 0
				}
			}
		}
	}
</script>

<style scoped>
	/*每个页面公共css */
		@import "uni.css";
		@import "xmjzIndex.css";
</style>
